<template>
    <div class="InvoiceInfo2">
        <div class="shareHeadClass">
            <p class="colCLas"></p>
            <p class="info">发票信息栏</p>
        </div>
        <el-form
            :model="vmsApprovalHzqrdSimpleVo"
            :rules="isLook ? {} : rules"
            label-width="85px"
            class="formInline"
            size="small"
            ref="hzqrdsqRef"
            :disabled="isLook"
        >
            <div style="margin-bottom: 8px">
                <el-row v-if="!isLook">
                    <el-col :span="8">
                        <el-form-item label="发票代码：">
                            <el-input
                                v-model="vmsApprovalHzqrdSimpleVo.fpdm"
                                maxlength="20"
                                placeholder="请输入发票代码"
                                :disabled='vmsApprovalHzqrdSimpleVo.fphm.length >= 20'
                                @input="handleInput1"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发票号码：" prop="fphm">
                            <el-input
                                v-model="vmsApprovalHzqrdSimpleVo.fphm"
                                maxlength="20"
                                placeholder="请输入发票号码"
                                @input="handleInput2"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-button
                        v-if="!isLook"
                        type="primary"
                        size="small"
                        style="margin-left: 8px"
                        @click="quickAdd"
                    >
                        快速添加
                    </el-button>
                    <el-button
                        v-if="!isLook"
                        type="primary"
                        size="small"
                        @click="search"
                    >
                        查询
                    </el-button>
                    <el-button v-if="!isLook" size="small" @click="research">
                        重置
                    </el-button>
                </el-row>
            </div>
            <el-form-item label="发票信息：">
                    <tableList
                        v-if="tableShow"
                        :showIndex="true"
                        border
                        maxHeight="260"
                        :keySet="keySet"

                        :tableData="vmsApprovalHzqrdSimpleVo.fpxxDetailList"
                        ref="tableRef"
                    >
                        <template #gmfmc="{ row }">
                            <div>
                                {{ row.gmfmc }}
                            </div>
                        </template>
                    </tableList>
            </el-form-item>

                        <el-form-item label="明细行信息：">
                            <div style="margin-bottom:4px;" v-if="!isLook">
                                <el-button
                                    type="primary"
                                    size="small"
                                    @click="matchFlow"
                                    :disabled="selectRow === null"
                                >
                                    匹配流水
                                </el-button>
                                <el-button  size="small" :disabled="selectRow === null"  @click="matchBatchFlow">
                                    手工匹配
                                </el-button>
                            </div>
                    <tableList
                        :showIndex="true"
                        border
                        maxHeight="260"
                        :keySet="keySet2"
                        :tableData="vmsApprovalHzqrdSimpleVo.fpxxItemList"
                        @rowClick='rowClickFn'
                        @rowDblclick='look'
                        ref="tableRef"
                        handlerFixed="right"
            :handlerShow="true"
        >
            <template #handler="{ row }">
                <div @click="look(row)" class="worldBlueBtn">查看</div>
            </template>
                        <template #gmfmc="{ row }">
                            <div>
                                {{ row.gmfmc }}
                            </div>
                        </template>
                        
                    </tableList>
            </el-form-item>

        </el-form>

        <matchFlowDialog
            v-model="matchFlowShow"
            v-if="matchDialogShow"
            @searchCbMatch="searchCbMatch"
            :selectRow="selectRow"
        ></matchFlowDialog>

        <matchFlowBatchDialog
            v-model="matchFlowBatchShow"
            v-if="matchBatchDialogShow"
            @searchCbMatchBatch="searchCbMatchBatch"
            :selectRow="selectRow"
        ></matchFlowBatchDialog>

<!-- 查询 -->
        <invoiceInformationDialog
            v-model="searchDialogShow"
            v-if="searchDialogShow"
            @searchCb="searchCb"
            :fphm="vmsApprovalHzqrdSimpleVo.fphm"
        ></invoiceInformationDialog>

        <DifferenceDetailDialog v-model="differenceDialogShow" :isApply='1' :selectRow='selectRow'></DifferenceDetailDialog>


    </div>
</template>

<script>
import tableList from '@/components/tableList/index.vue'
import { fastAdd,getApplyDetail } from '@/api/matchFlow.js'
import invoiceInformationDialog  from './components/invoiceInformationDialog.vue'
import DifferenceDetailDialog from '../../invoiceMatchFlowApply/DifferenceDetailDialog.vue'
import matchFlowDialog  from './components/matchFlowDialog.vue'
import matchFlowBatchDialog  from './components/matchFlowBatchDialog.vue'

export default {
    name: 'invoiceInformation15',
    props: {
        isLook: {
            type: Boolean,
            default: false,
        },
        nodeId: {
            type: String,
            default: '',
        },
    },
    created(){
        this.initDetail()
    },
    data() {
        return {
            selectRow: null,
            differenceDialogShow: false,
            rules: {
                fphm: [
                    {
                        required: true,
                        message: '请输入发票号码',
                        trigger: 'change',
                    },
                ],
            },
            tableShow: true,
            searchDialogShow: false,
            matchFlowShow: false,
            matchDialogShow: false,
            matchFlowBatchShow: false,
            matchBatchDialogShow: false,
            keySet: [
                {
                    label: '销售方名称',
                    englishName: 'xsfmc',
                    width: '200',
                },
                {
                    label: '发票类型',
                    englishName: 'fplx',
                    width: '160',
                },
                {
                    label: '发票号码',
                    englishName: 'fphm',
                },
                {
                    label: '发票代码',
                    englishName: 'fpdm',
                    width: 'labelWidth',
                },
                {
                    label: '开票日期',
                    englishName: 'kprq',
                    width: 'labelWidth',
                },
                {
                    label: '购买方名称',
                    englishName: 'gmfmc',
                    width: 'labelWidth',
                },
                {
                    label: '购买方纳税人识别号',
                    englishName: 'gmfsbh',
                    width: 'labelWidth',
                },
                {
                    label: '不含税金额',
                    englishName: 'hjje',
                    width: 'labelWidth',
                },
                {
                    label: '税额',
                    englishName: 'hjse',
                },
                {
                    label: '含税金额',
                    englishName: 'jshj',
                },
            ],
            keySet2: [
                {
                    label: '项目名称',
                    englishName: 'spmc',
                    width: '200',
                },
                {
                    label: '规格型号',
                    englishName: 'ggxh',
                    width: '160',
                },

                {
                    label: '单位(面积单位)',
                    englishName: 'jldw',
                    width: 'labelWidth',
                },
                {
                    label: '数量',
                    englishName: 'gmsl',
                    width: '100',
                },
                {
                    label: '单价',
                    englishName: 'dj',
                },
                {
                    label: '不含税金额',
                    englishName: 'je',
                    width: 'labelWidth',
                },
                {
                    label: '税率',
                    englishName: 'sl',
                    width: '100',
                },
                {
                    label: '税额',
                    englishName: 'se',
                    width: '100',
                },
            ],

            vmsApprovalHzqrdSimpleVo: {
                fpdm: '', //
                fphm: '', //
                fpxxDetailList: [],
                fpxxItemList: [],
            },
        }
    },
    methods: {
        look(val) {
                    console.log(val)
            this.selectRow = val;
            this.selectRow.oidid = this.vmsApprovalHzqrdSimpleVo.fpxxDetail.oidid; // 
            this.selectRow.matid = this.vmsApprovalHzqrdSimpleVo.fpxxDetail.matid; //;
            this.differenceDialogShow = true
        },
             initDetail(){
                    if(this.nodeId == 'root' || this.isLook){
                        let obj = JSON.parse(
                            sessionStorage.getItem('handleDetailInfo')
                        )
                        let id = obj.busId || this.$store.state.invoice2.invoinceFormStart1.busId
                        getApplyDetail(id).then(({ data, code,message })=>{
                            if (code == 200) {
                                this.vmsApprovalHzqrdSimpleVo = {
                                    ...data.invoiceDetail,
                                    fpxxDetailList:    [data.invoiceDetail],
                                    fpxxDetail:    data.invoiceDetail,
                                    fpxxItemList:    data.invoiceItemList,
                                }
                                setTimeout(() => {
                                    this.$refs.hzqrdsqRef.clearValidate()
                                }, 20)
                            }
                        })
                    }
        },
        rowClickFn(val) {
                        this.selectRow = {...val}
                        this.selectRow.fphm = this.vmsApprovalHzqrdSimpleVo.fphm
                        this.selectRow.matid = this.vmsApprovalHzqrdSimpleVo.fpxxDetail.matid
                        this.selectRow.iviid = val.iviid
                        this.selectRow.ywdh = this.vmsApprovalHzqrdSimpleVo.ywdh
                        this.selectRow.gmfmc = this.vmsApprovalHzqrdSimpleVo.fpxxDetailList[0].gmfmc
        },
        matchFlow() {
            if(!this.selectRow.ggxh){
                return this.$message.error("规格型号为空，请选择手工匹配流水!")
            }

            this.matchDialogShow = true;
            this.$nextTick(()=>{
                this.matchFlowShow = true;
            })
        },
        matchBatchFlow(val) {
                this.matchFlowBatchShow = true;

            this.$nextTick(()=>{
            this.matchBatchDialogShow = true;

            })
        },
        handleInput1(val) {
            // 使用正则表达式去除非数字字符
            this.vmsApprovalHzqrdSimpleVo.fpdm = val.replace(/\D/g, '')
            if (this.vmsApprovalHzqrdSimpleVo.fpdm.length > 12) {
                this.vmsApprovalHzqrdSimpleVo.fpdm =
                    this.vmsApprovalHzqrdSimpleVo.fpdm.slice(0, 12)
            }
        },

        handleInput2(val) {
            this.vmsApprovalHzqrdSimpleVo.fphm = val.replace(/\D/g, '')
            if (this.vmsApprovalHzqrdSimpleVo.fphm.length > 20) {
                this.vmsApprovalHzqrdSimpleVo.fphm =
                    this.vmsApprovalHzqrdSimpleVo.fphm.slice(0, 20)
            }
        },
        quickAdd() {
            if (
                this.vmsApprovalHzqrdSimpleVo.fphm.length < 20 &&
                !this.vmsApprovalHzqrdSimpleVo.fpdm
            ) {
                return this.$message.error(
                    '发票号码不足20位，发票代码不得为空！'
                )
            }

            let params = new URLSearchParams('')
            params.append('fphm', this.vmsApprovalHzqrdSimpleVo.fphm)
            params.append('fpdm', this.vmsApprovalHzqrdSimpleVo.fpdm)
            params.append(
                'applyId',
                this.$store.state.invoice2.invoinceFormStart1.busId
            )
            fastAdd(params).then(({ data, code,message }) => {
                if (code == 200) {
                    this.vmsApprovalHzqrdSimpleVo = {
                        ...this.vmsApprovalHzqrdSimpleVo,
                        ...data.vmsApprovalHzqrdSimpleVo,
                        fpxxDetailList:    [data.invoiceDetail],
                        fpxxDetail:    data.invoiceDetail,
                        fpxxItemList:    data.invoiceItemList,
                    }
                    setTimeout(() => {
                        this.$refs.hzqrdsqRef.clearValidate()
                    }, 20)
                }
            })
        },
        searchCbMatchBatch(obj) {
                        this.matchFlowBatchShow = false;
            this.$nextTick(()=>{
                this.matchBatchDialogShow = false;
            })
            // this.searchDialogShow = obj.show
            // if (obj.row && obj.row.fphm) {
            //     this.vmsApprovalHzqrdSimpleVo.fphm = obj.row.fphm
            //     this.vmsApprovalHzqrdSimpleVo.fpdm = obj.row.fpdm
            //     this.quickAdd()
            // }
        },
        searchCbMatch(obj) {
            this.matchFlowShow = false;
            this.$nextTick(()=>{
                this.matchDialogShow = false;
            })
            // this.searchDialogShow = obj.show
            // if (obj.row && obj.row.fphm) {
            //     this.vmsApprovalHzqrdSimpleVo.fphm = obj.row.fphm
            //     this.vmsApprovalHzqrdSimpleVo.fpdm = obj.row.fpdm
            //     this.quickAdd()
            // }
        },
        searchCb(obj) {
            this.searchDialogShow = obj.show
            if (obj.row && obj.row.fphm) {
                this.vmsApprovalHzqrdSimpleVo.fphm = obj.row.fphm
                this.quickAdd()
            }
        },
        search() {
            this.searchDialogShow = true

        },
        research() {
            this.vmsApprovalHzqrdSimpleVo.fphm = ''
            this.vmsApprovalHzqrdSimpleVo.fpdm = ''
        },
    },
    components: {
        tableList,
        invoiceInformationDialog,
        matchFlowDialog,
        matchFlowBatchDialog,
        DifferenceDetailDialog,
    },
}
</script>

<style lang = "scss" scoped>
.InvoiceInfo2 {
    width: 100%;
    ::v-deep .el-form-item__error{
        top: 70%;
    }
    ::v-deep .el-dialog__body {
        padding: 10px 20px;
    }
    ::v-deep .el-dialog__footer {
        padding: 0px 20px 10px;
    }
}

::v-deep .el-table__body tr.current-row > td {
    background-color: #fbec88 !important;
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
    background-color: #fbec88 !important;
}
</style>
